import React, { useCallback, useEffect, useState } from 'react';
import { Form, DatePicker } from 'antd';
import 'src/pages/AnalyseManage/EditReport/index.module.scss';
import moment from 'moment';
import locale from 'antd/es/date-picker/locale/zh_CN';

const { RangePicker } = DatePicker;

interface IProps {
	field: any;
	conditions: any;
	setDimensionDate: Function;
}

const FilterFieldDate = ( props: IProps ) => {

	const { field, setDimensionDate } = props;

	// const [ way, setWay ] = useState( FILTER_DATE_TYPE[ 0 ].value );
	const [ from, setFrom ] = useState( '' );
	const [ to, setTo ] = useState( '' );
	// const [ dateRange, setDateRange ] = useState( [] );

	const [ form ] = Form.useForm();

	// const handleSelect = ( value ) => {
	// 	setWay( value );
	// };

	const handleChange = ( dates, dateStrings ) => {
		console.log( '==== date Change ====', dateStrings );
		setFrom( dateStrings[0] ? `${dateStrings[0]} 00:00:00` : '' );
		setTo( dateStrings[1] ? `${dateStrings[1]} 00:00:00` : '' );
	};

	const setCondition = useCallback( () => {		
		const conditions = [
			{
				field: field.name,
				symbol: 'GTE',
				values: from ? [ from ] : null,
			},
			{
				field: field.name,
				symbol: 'LTE',
				values: to ? [ to ] : null,
			}
		];
		// console.log( '---setCondition ----', conditions );

		setDimensionDate( conditions );
	}, [ field, from, to, setDimensionDate ] );

	useEffect( () => {
		setCondition();
	}, [ setCondition ] );

	useEffect( () => {
		let condValues = [];
		props.conditions.forEach( item => {
			condValues.push( ...item.values );
		} );
		console.log( '---date ----', condValues );
		if ( condValues.length ) {
			form.setFieldsValue( {
				dateRange: [
					condValues[0] ? moment( condValues[0] ) : '',
					condValues[1] ? moment( condValues[1] ) : ''
				]
			} );
		} else {
			form.resetFields();
		}
	}, [ props.conditions, form ] );

	return (
		<Form className='filter_field_modal_date' form={form} labelCol={ { span: 6 } } labelAlign='left'>

			<Form.Item name="dateRange" colon={ false }>
				<RangePicker style={ { width: '100%' } } locale={locale} onChange={ handleChange } />
			</Form.Item>

		</Form>
	);
};

export default React.memo( FilterFieldDate );
